<script lang='ts' setup>
import { ref, onMounted, onUpdated } from "vue";
import Setting from "../Setting.vue";
import Prompt from "../chat/Prompt.vue";
import { Site } from "@/config/base";
import { appNotify, NotifyType } from "@/models/app.notify";
import router from "@/router";
import User from '../User.vue'
import { appContext } from "@/models/app.context";
import { synchronousService } from "@/services/synchronous.service";
import { appRef } from "@/models/app.ref";
import { Message } from "@arco-design/web-vue";

type MenuInfo = {
  icon?: string;
  name?: string;
  href?: string;
  isDivider?: boolean;
  target?: '_blank';
  color?: string;
  hot?: boolean;
  update?: boolean;
  isMobile?: boolean;
}

const loading = ref(true);
const currMenu = ref("");
const menus = ref([] as MenuInfo[]);

onMounted(() => {
  menus.value = [
    {
      icon: 'icon-xiaoxi',
      name: "高效问答",
      href: "/chat/working-edition",
      color: "#FF9800",
      update: true
    },
    {
      icon: 'icon-yuyin',
      name: "角色对话",
      href: "/voice",
      target: '_blank',
      color: "#38b577",
      hot: true,
      isMobile: true,
    },
    {
      icon: 'icon-fensizengchang',
      name: "在线检索",
      href: "/chat/online-search",
      color: "#ce00ff",
    },
    {
      icon: 'icon-huihua',
      name: "随心作画",
      href: "/chat/aidraw",
      color: "#FF9800",
    },
    {
      icon: 'icon-wendangfenxi',
      name: "文档分析",
      href: "/chat/documentQA",
      color: "#00aaff",
    },
    {
      icon: 'icon-siweidaotu1',
      name: "思维导图",
      href: "/chat/mind-map",
      color: "#795548",
    },
    {
      isDivider: true
    },
    {
      icon: 'icon-chanpinliebiaopubuliumoshi',
      name: "精选画廊",
      href: "/media/gallery",
      color: "#b700ff",
      target: '_blank',
    },
    // {
    //   icon: 'icon-kuaixun2',
    //   name: "科学快讯",
    //   href: "/article",
    //   color: "#ff4f4f",
    //   target: '_blank',
    // },
    {
      isDivider: true
    },
    {
      name: "交流社区",
      href: Site.txc,
      color: "#b700ff",
      target: '_blank'
    },
    {
      name: "FAQ",
      href: "/chat/faq",
      color: "#b700ff"
    },
  ]
  appNotify.addListener(NotifyType.routerChange, routerChange, "hope-header");
  const { viewWidth } = appContext.system.data;
  collapsed.value = !Boolean(viewWidth < 1000);
  routerChange();
});

function routerChange(opt?: NotifyType, msg?: string): void {
  console.log(opt, msg);
  const href = location.href;
  currMenu.value =
    msg || menus.value.find((val) => href.includes(val.href))?.href;
  loading.value = false;
}

const isSetting = ref(false);
const isMask = ref(false);

function toProductDocument(): void {
  window.location.href = Site.feishudocument;
}

function toPath(item: MenuInfo): void {
  if (item.isMobile && appContext.system.data.viewWidth > 1000) {
    Message.warning("该功能仅支持移动设备")
    return;
  }
  if (item.target === '_blank') {
    const url = item.href?.includes('http') ? item.href : location.origin + '/#' + item.href
    window.open(url);
  } else {
    router.replace(item.href)
  }
}

const collapsed = ref(false);


function onSynchronous(isUp: boolean): void {
  isUp ? synchronousService.up() : synchronousService.down()
}

</script>
<template>
  <div class="header flex-c animated" v-if="!loading"
    :class="{ 'collapsed-header': !collapsed, 'fadeIn': appRef.isOpen }">
    <div class="left flex-c">
      <div class="logo-bar flex">
        <img v-if="collapsed" class="logo" src="@/assets/logo.webp" alt="zaiwen" @click="() => router.replace('/')">
        <div class="collapsed" @click="collapsed = !collapsed">
          <icon-menu-fold class="icon" v-if="collapsed" />
          <icon-menu-unfold class="icon" v-else />
        </div>
      </div>
      <a-menu :selected-keys="[currMenu]" class="menu-group">
        <template v-for="item in menus">
          <a-divider v-if="item.isDivider" />
          <a-menu-item class="flex menu" :key="item.href" @click="toPath(item)" v-else>
            <div class="icon iconfont" :class="item.icon" :style="{ color: item.color }"></div>
            <span v-if="collapsed"> {{ item.name }}</span>
            <span class="suffix hot" v-if="item.hot && collapsed">hot</span>
            <span class="suffix update" v-if="item.update && collapsed">update</span>
          </a-menu-item>
        </template>
      </a-menu>
    </div>
    <div class="right flex-c">
      <div class="box flex" @click="isSetting = true">
        <icon-settings size="24" />
        <span v-if="collapsed" style="margin-left: 6px;">全局设置</span>

      </div>
      <div class="box" style="padding: 0;">
        <Theme :show="true" class="icon" :collapsed="collapsed"></Theme>
      </div>
      <User :collapsed="collapsed" />
    </div>

    <!-- <div class="tip flex">
      <div class="feedback flex-c">
        <a href="https://wj.qq.com/s2/12975626/ab4f/" target="_blank" rel="noopener noreferrer">
          <icon-bug class="icon" />
        </a>
        <a href="https://wj.qq.com/s2/12975034/ea14/" target="_blank" rel="noopener noreferrer">
          <icon-thunderbolt class="icon" />
        </a>
      </div>
    </div> -->
    <a-modal :fullscreen="appContext.system.data.viewWidth < 1000" v-model:visible="isSetting" title="全局设置"
      @cancel="isSetting = false" :footer="false">
      <Setting />
    </a-modal>

    <a-drawer :width="340" title="Prompt" v-model:visible="isMask" @cancel="isMask = false" unmountOnClose
      :footer="false">
      <Prompt />
    </a-drawer>
  </div>
</template>
<style lang='scss' scoped>
.header {
  background: var(--color-bg-2);
  color: var(--color-text-2);
  height: 100%;
  padding: 1rem;
  width: 268px;
  border-right: 1px solid var(--color-neutral-4);
  max-width: 60vw;
  justify-content: space-between;
  overflow: hidden;
  transition: all .3s;

  .left {
    width: 100%;
    flex: 1;
    overflow: auto;

    .logo-bar {
      height: 70px;
      width: 100%;
      justify-content: space-around;
      margin-bottom: 20px;

      .collapsed {
        padding: 6px;
        background: var(--color-neutral-2);
        border-radius: 4px;

        .icon {
          margin: 0;
        }
      }

      .logo {
        height: 100%;
        z-index: 1;
        cursor: pointer;
      }
    }

    .menu-group {
      overflow: auto;
    }


    .menu {
      font-size: 13px;
      font-weight: 600;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
      position: relative;

      .suffix {
        position: absolute;
        font-size: 10px;
        top: 50%;
        right: 0;
        transform: translate(-6px, -50%);
        border-radius: 50px;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        padding: 0 6px;
      }

      .hot {
        font-style: italic;
        background: rgb(var(--red-6));
        color: white;
      }

      .update {
        font-style: italic;
        background: rgb(var(--green-6));
        color: white;
      }
    }

    .icon {
      font-size: 22px;
      margin-right: 10px;
    }
  }

  .right {
    width: 100%;

    .box {
      width: 100%;
      background: var(--color-neutral-2);
      padding: .75rem;
      border-radius: 10px;
      text-align: center;
      cursor: pointer;
      margin-bottom: 10px;
      justify-content: center;
    }

    .menu {
      margin: 0 10px;
      cursor: pointer;

      &.mask {
        display: none;
      }

      @media screen and (max-width: 1200px) {
        &.mask {
          display: block;
        }
      }
    }
  }


  .tip {
    // width: 100%;
    // padding: 7px;
    // text-decoration: none;
    // background: var(--color-neutral-4);

    .text {
      flex: 1;
      text-align: center;
      justify-content: center;
      color: rgb(var(--arcoblue-7));
      opacity: 0.7;

      span {
        margin: 0 10px;
      }
    }

    .prompt {
      height: 100%;
      margin-right: 10px;
      cursor: pointer;
    }

    .feedback {
      position: fixed;
      top: 50%;
      right: 10px;

      .icon {
        font-size: 20px;
        background-color: var(--color-neutral-8);
        color: var(--color-neutral-1);
        padding: 10px;
        box-sizing: content-box;
        border-radius: 3px;
        margin: 2px;
        cursor: pointer;
      }

      @media screen and (max-width: 1200px) {
        right: 3px;

        .icon {
          font-size: 17px;
          padding: 7px;
        }
      }
    }

    .qr-code {
      a {
        width: 20px;
        overflow: hidden;

        .qr {
          width: 20px;
          object-fit: contain;
        }
      }
    }
  }
}

.collapsed-header {
  width: 100px;
  overflow: hidden;
  padding: 10px;
}
</style>
